<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>

  <body>

    <table>
      <tr>
        <td style="width: 200px; vertical-align: top">
          <ul id="chapters">
            <li><a href="./book/1.html" >第1章</a></li>
            <li><a href="./book/2.html" >第2章</a></li>
            <li><a href="./book/3.html" >第3章</a></li>
            <li><a href="./book/4.html" >第4章</a></li>
          </ul>
        </td>
        <td style="width: 80%" id="content"></td>
      </tr>
    </table>
    <script src="getResponse.js"></script>
    <script>
      // getResponse('./book/1.html')
      //   .then(text => console.log(text))
document.getElementById('chapters').onclick = (e) => {
  // console.log(e.target)
  if (e.target.tagName === 'A') {
    e.preventDefault()
    const url = e.target.href
    getResponse(url).then((text) => {
      document.getElementById('content').innerHTML
        = text
    })
  }
}
    </script>
  </body>
</html>
